/* 事件列表*/
<template>
  <div class="event labBox">
    <comTitle class="flex tableComonTop">
      <template class="flex-common" #title>
        <div>维护/维修列表</div>
        <div class="submit" @click="add">新增</div>
      </template>
    </comTitle>
    <div class="table">
      <div class="flex-common tableComonTop">
        <div class="option mr-16" v-if="falcutyOptions.length > 0">
          <selectName
            :selectArr="falcutyOptions"
            keys="facultyNo"
            label="facultyName"
            valueKey="facultyNo"
            :title="true"
            :value="formData.facultyNo"
            @dropDown="(val) => (formData.facultyNo = val)"
          >
            <div class="fs-16 cr-hui3">学院名称：</div>
          </selectName>
        </div>
        <div class="option mr-16" v-if="laboratoryOptions.length > 0">
          <selectName
            :selectArr="laboratoryOptions"
            :title="true"
            keys="laboratoryNo"
            label="laboratoryName"
            valueKey="laboratoryNo"
            :value="formData.laboratoryNo"
            @dropDown="(val) => (formData.laboratoryNo = val)"
          >
            <div class="fs-16 cr-hui3">实验室：</div>
          </selectName>
        </div>
        <div class="option mr-16" v-if="maintainTypeOptions.length > 0">
          <selectName
            :selectArr="maintainTypeOptions"
            :title="true"
            keys="id"
            label="name"
            valueKey="id"
            :value="formData.maintainType"
            @dropDown="(val) => (formData.maintainType = val)"
          >
            <div class="fs-16 cr-hui3">维护类型：</div>
          </selectName>
        </div>
        <div class="time">
          <Time :type="'datetimerange'" :title="false"></Time>
        </div>
        <div class="submit" @click="submit">导出</div>
      </div>
      <scroll :height="80">
        <mergeTable :tableData="tableList" :tableConfig="config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" label="维护类型" slot="maintainType">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getMaintainType(row.maintainType)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="维修内容"
            slot="maintainContext"
          >
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getMaintainType(row.maintainContext)
              }}</span>
            </template>
          </el-table-column>
        </mergeTable>
      </scroll>
      <paging @onPage="onPage" @onNum="onNum" :total="total" />
    </div>
    <!-- 维护维修新增弹窗 -->
    <formDialog
      :dialogFormVisible="dialogFormVisible"
      @close="close"
      :title="'新增维护/维修记录'"
    >
      <template #form>
        <el-form
          label-position="top"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div class="formBox mb-20">
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="学院名称" prop="facultyNo">
                  <selectName
                    keys="facultyNo"
                    label="facultyName"
                    valueKey="facultyNo"
                    :selectArr="diafalcutyOptions"
                    :placeholder="'请选择学院名称'"
                    :value="ruleForm.facultyNo"
                    @dropDown="(val) => (ruleForm.facultyNo = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实验室" prop="laboratoryNo">
                  <selectName
                    keys="laboratoryNo"
                    label="laboratoryName"
                    valueKey="laboratoryNo"
                    :selectArr="dialaboratoryOptions"
                    :title="false"
                    :placeholder="'请选择实验室'"
                    :value="ruleForm.laboratoryNo"
                    @dropDown="(val) => (ruleForm.laboratoryNo = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="设备名称" prop="equipmentNo">
                  <selectName
                    keys="equipmentNo"
                    label="equipmentName"
                    valueKey="equipmentNo"
                    :selectArr="options"
                    :placeholder="'请选择设备名称'"
                    :value="ruleForm.equipmentNo"
                    @dropDown="(val) => (ruleForm.equipmentNo = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维护类型" prop="maintainType">
                  <selectName
                    keys="id"
                    label="name"
                    valueKey="id"
                    :selectArr="diamaintainContextOptions"
                    :title="false"
                    :placeholder="'请选择维护类型'"
                    :value="ruleForm.maintainType"
                    @dropDown="(val) => (ruleForm.maintainType = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="维修内容" prop="maintainContext">
                  <selectName
                    keys="id"
                    label="name"
                    valueKey="id"
                    :selectArr="maintainContextOptions"
                    :placeholder="'请选择维修内容'"
                    :value="ruleForm.maintainContext"
                    @dropDown="(val) => (ruleForm.maintainContext = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维修人员" prop="maintainPerson">
                  <el-input
                    size="mini"
                    :placeholder="'请输入维修人员'"
                    v-model="ruleForm.maintainPerson"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="联系方式" prop="maintainContaction">
                  <el-input
                    v-model="ruleForm.maintainContaction"
                    size="mini"
                    :placeholder="'请输入联系方式'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维修时间" prop="maintainTime">
                  <Time
                    :type="'date'"
                    :value="ruleForm.maintainTime"
                    @valueChange="(event) => (ruleForm.maintainTime = event)"
                  ></Time>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="formBox">
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="验收人员（不可修改）" prop="checker">
                  <el-input
                    v-model="ruleForm.checker"
                    size="mini"
                    :placeholder="'请输入验收人员'"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="联系方式（不可修改）"
                  prop="checkerContaction"
                >
                  <el-input
                    v-model="ruleForm.checkerContaction"
                    :disabled="true"
                    size="mini"
                    :placeholder="'请输入验收人员联系方式'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="bottom">
            <div class="more" @click="submitform('ruleForm')">提交</div>
          </div>
        </el-form>
      </template>
    </formDialog>
  </div>
</template>

<script>
import { maintainListConfig } from "@/jsonData/table";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
import exportInterface from "@/utils/exportInterface";
import {
  miantainfindList,
  findEquipmentByLaboratory,
  addequipmentMaintain,
} from "@/http/api";
export default {
  name: "maintainList",
  data() {
    var validatePHone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入维修人员联系方式"));
      } else {
        if (this.ruleForm.maintainContaction.length !== 11) {
          callback(new Error("请输入正确的手机格式"));
        }
        callback();
      }
    };
    return {
      optionsday: {
        type: Object,
        default: () => {
          return {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          };
        },
      },
      exportInterface: exportInterface.exportInterface,
      tableCommonMethod: tableCommonMethod,
      formData: {
        facultyNo: "",
        laboratoryNo: "",
        eventType: null,
        startTime: "2019-06-17 00:00:00",
        endTime: "2022-08-17 23:59:59",
        pageSize: 10,
        pageNum: 1,
        maintainType: "",
      },
      falcutyOptions: [],
      diafalcutyOptions: [],
      dialaboratoryOptions: [],
      laboratoryOptions: [],
      ruleForm: {
        collegeNo: "", //院校编号
        facultyNo: "", //院系编号
        laboratoryNo: "", //实验室编号
        equipmentNo: "", //设备编号
        maintainType: "", //维护类型
        maintainContext: "", //维护内容
        maintainPerson: "", //维修人员
        maintainContaction: "", //维修联系方式
        checker: "", //验收人员
        checkerContaction: "", //验收联系方式
        maintainTime: "", //维修时间
      },
      maintainContextOptions: [
        {
          id: 1,
          name: "耗材更换",
        },
        {
          id: 2,
          name: "常规检查 ",
        },
        {
          id: 3,
          name: "零件更换",
        },
        {
          id: 4,
          name: "其他 ",
        },
      ],
      rules: {
        facultyNo: [
          { required: true, message: "请选择学院名称", trigger: "change" },
        ],
        laboratoryNo: [
          { required: true, message: "请选择实验室", trigger: "change" },
        ],
        maintainType: [
          { required: true, message: "请选择维护类型", trigger: "change" },
        ],
        maintainContext: [
          { required: true, message: "请选择维修内容", trigger: "change" },
        ],
        maintainPerson: [
          { required: true, message: "请输入维修人员姓名", trigger: "blur" },
        ],
        maintainContaction: [
          {
            required: true,
            message: "请输入维修人员联系方式",
            trigger: "blur",
          },
          { validator: validatePHone, trigger: "blur" },
        ],
        checker: [
          { required: true, message: "请输入验收人员姓名", trigger: "blur" },
        ],
        checkerContaction: [
          {
            required: true,
            message: "请输入验收人员联系方式",
            trigger: "blur",
          },
        ],
        maintainTime: [
          {
            required: true,
            message: "请选择维修时间",
            trigger: "change",
          },
        ],
      },
      dialogFormVisible: false,
      laboratoryNo: "",
      maintainType: "",
      options: [],
      maintainTypeOptions: [
        {
          id: "",
          name: "全部",
        },
        {
          id: 1,
          name: "定期维护",
        },
        {
          id: 2,
          name: "异常维护",
        },
      ],
      diamaintainContextOptions: [
        {
          id: 1,
          name: "定期维护",
        },
        {
          id: 2,
          name: "异常维护",
        },
      ],
      total: 0,
      tableList: [],
      config: maintainListConfig,
      tableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
    };
  },
  mounted() {
    // this.formData.startTime = this.$getTime(this.tableTimeValue[0]);
    // this.formData.endTime = this.$getTime(this.tableTimeValue[1]);
    this.falcutyOptions = JSON.parse(localStorage.getItem("departmentData"));
    this.diafalcutyOptions = JSON.parse(localStorage.getItem("departmentData"));
    this.laboratoryOptions = JSON.parse(localStorage.getItem("laboratoryData"));
    this.dialaboratoryOptions = JSON.parse(
      localStorage.getItem("laboratoryData")
    );
    this.falcutyOptions.unshift({
      facultyNo: "",
      facultyName: "全部",
    });
    this.laboratoryOptions.unshift({
      laboratoryNo: "",
      laboratoryName: "全部",
    });
    let userInfoDetail = JSON.parse(localStorage.getItem("userInfo"));
    this.ruleForm.checkerContaction = userInfoDetail.phone;
    this.ruleForm.checker = userInfoDetail.userName;
    this.ruleForm.collegeNo = userInfoDetail.collegeNo;
    this.initmiantainfindList();
  },
  methods: {
    // 事件列表
    async initmiantainfindList() {
      let params = {
        laboratoryNo: this.formData.laboratoryNo,
        facultyNo: this.formData.facultyNo,
        maintainType: this.formData.maintainType,
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
      };
      let res = await miantainfindList(params);
      if (res.code === 20000) {
        this.tableList = res.data.rows;
        this.total = res.data.total;
      }
    },
    async initfindEquipmentByLaboratory() {
      let params = {
        laboratoryNo: this.ruleForm.laboratoryNo,
      };
      let res = await findEquipmentByLaboratory(params);
      if (res.code === 20000) {
        this.options = res.data;
      }
    },
    /* 确定按钮 */
    submit() {
      let params = {
        laboratoryNo: this.formData.laboratoryNo,
        facultyNo: this.formData.facultyNo,
        maintainType: this.formData.maintainType,
        startTime: this.formData.startTime,
        endTime: this.formData.endTime,
      };
      this.exportInterface("miantainfindListByExcel", params);
    },
    /* 确定按钮 */
    onPage(val) {
      this.formData.pageSize = val;
      this.initmiantainfindList();
    },
    onNum(val) {
      this.formData.pageNum = val;
      this.initmiantainfindList();
    },
    //弹起待审核
    statusHander() {
      this.wait.waitVisible = true;
    },

    /* 新增*/
    add() {
      this.dialogFormVisible = true;
    },
    // 关闭弹窗
    close() {
      this.dialogFormVisible = false;
    },
    // 表单提交
    submitform(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await addequipmentMaintain(this.ruleForm);
          if (res.code === 20000) {
            this.dialogFormVisible = false;
            this.$refs[formName].resetFields();
            this.initmiantainfindList();
            this.$notify({
              message: res.message,
              duration: 1000,
            });
          }
        } else {
          return false;
        }
      });
    },
  },
  watch: {
    tableTimeValue: {
      handler(val) {
        this.formData.startTime = val[0];
        this.formData.endTime = val[1];
        this.initmiantainfindList();
      },
      deep: true,
    },
    "formData.facultyNo": {
      handler(val) {
        this.initmiantainfindList();
      },
      deep: true,
    },
    "formData.laboratoryNo": {
      handler(val) {
        this.initmiantainfindList();
      },
      deep: true,
    },
    "formData.maintainType": {
      handler(val) {
        this.initmiantainfindList();
      },
      deep: true,
    },

    "ruleForm.laboratoryNo": {
      handler(val) {
        this.initfindEquipmentByLaboratory();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.event {
  padding: 0px 24px;
  height: 100% !important;
  .table {
    height: 95%;
    overflow: hidden;
  }
}
.tableDetail {
  margin-bottom: 20px;
}
.bottom-wrap {
  left: 48px !important;
  right: 48px !important;
  position: absolute;
  bottom: 40px;
}
.tableComonTop {
  height: 64px;
  .submit {
    cursor: pointer;
    margin-left: 24px;
    width: 90px;
    height: 28px;
    border: 1px solid #00bfb1;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00bfb1;
    line-height: 28px;
  }
  .input {
    height: 24px;
    line-height: 24px;
    margin-right: 20px;
    /deep/.el-input__inner {
      height: inherit !important;
      line-height: inherit !important;
    }
  }
}
</style>

<style lang="scss">
.el-form.demo-ruleForm {
  position: relative;
  .el-form-item__label {
    padding: 0px !important;
    line-height: 20px !important;
  }
  .bottom {
    display: flex;
    justify-content: flex-end;
    .more {
      cursor: pointer;
      margin-top: 28px;
      margin-left: 24px;
      width: 90px;
      height: 28px;
      border: 1px solid #00bfb1;
      border-radius: 2px;
      text-align: center;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #00bfb1;
      line-height: 28px;
    }
  }
}
.el-form.demo-ruleForm {
  .el-input__suffix {
    top: -3px !important;
  }
  .selectT {
    width: 100% !important;
  }
  position: relative;
  .el-form-item__label {
    padding: 0px !important;
    line-height: 20px !important;
  }
  .maintenanceInput {
    width: 90% !important;
  }
  .maintenancePeriod {
    position: absolute;
    right: 3%;
  }
  .el-date-editor.el-input {
    width: 100% !important;
    margin-right: 0px !important;
  }
}
</style>